<template>
    <div class="header-container">
        <el-dialog
  title="上传头像"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-upload
  ref="upload"
  class="avatar-uploader"
  :action="evUrl+'zj/upload'"
  :show-file-list="false"
  :data="infoVal"
  :on-success="handleAvatarSuccess"
  :auto-upload="false"
  :on-change="picPre">
  <img v-if="flag" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  <el-button style="display:inline-block;margin-left: 30px;" size="small" type="success" @click="submitUpload">上传</el-button>
  <!-- <el-form ref="form" :model="updateData" label-width="100px" class="demo-ruleForm">
    <el-form-item label="账号" prop="name">
    <el-input v-model="updateData.username" placeholder="请输入账号"></el-input>
  </el-form-item>
  <el-form-item label="旧密码" prop="name">
    <el-input v-model="updateData.oldPassword" placeholder="请输入旧密码"></el-input>
  </el-form-item>
  <el-form-item label="新密码" prop="name">
    <el-input v-model="updateData.newPassword" placeholder="请输入新密码"></el-input>
  </el-form-item>
  </el-form> -->
</el-dialog>
        <div class="l-content">
            <el-button @click="handleMenu" style="margin-right: 20px" icon="el-icon-s-operation" size="mini"></el-button>
            <i @click="onloadVue" style="color:#ffffff;font-size:28px;cursor:pointer" class="el-icon-refresh-right"></i>
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item></el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="r-content" style="display:flex;align-items:center">
          <div>
            <el-button @click="loginOut" size="mini" icon="el-icon-back" style="padding:0;background-color:transparent;border:0;color:#fff;font-size:15px">返回首页</el-button>
            <el-button @click="changeImg" size="mini" icon="el-icon-picture" style="margin-right:10px;background-color:transparent;border:0;color:#fff;font-size:15px">更换头像</el-button>
          </div>

            <el-dropdown @command="handleClick">
                <span class="el-dropdown-link">
                    <!-- <img class="user" v-if="uploadImage" :src="uploadImage" alt="">
                    <img class="user" v-else :src="userImage" alt=""> -->
                    <img class="user" :src="imageSrc? (evUrl+imageSrc):(evUrl+'56b731c4732fab16e2558f9237d04e60.png')" alt="">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item  v-if="false" command="changePass">上传头像</el-dropdown-item>
                    <el-dropdown-item  v-if="false" command='logout'>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      dialogVisible: false,
      evUrl: this.$evUrl,
      updateData: {
        username: '',

        oldPassword: '',
        newPasword: '',
        role: 0
      },
      imageUrl: '',
      imageSrc: '',
      userImage: '',
      flag: false,
      // infoId
      infoVal: {}
    }
  },
  methods: {
    // 返回首页
    loginOut () {
      // window.localStorage.clear()
      this.$store.commit('deleteTagAll')
      this.$router.push('/home')
    },
    // 更换头像
    changeImg () {
      this.dialogVisible = true
    },
    // 刷新
    onloadVue () {
      this.$store.commit('reOnload')
    },
    handleMenu () {
      this.$store.commit('collapseMenu')
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleClick (command) {
      if (command === 'logout') {
        window.localStorage.clear()
        this.$store.commit('deleteTagAll')
        this.$router.push('/login')
      }
      if (command === 'changePass') {
        this.dialogVisible = true
      }
    },
    picPre (file, fileList) {
      this.flag = !this.flag
      // console.log(window.URL.createObjectURL(file.raw))
      // console.log(file, fileList)
      this.imageUrl = window.URL.createObjectURL(file.raw)
    },
    submitUpload () {
      this.$refs.upload.submit()
      // this.loadImage()
      this.dialogVisible = false
    },
    handleAvatarSuccess (response) {
      // console.log('hello', response)
      this.imageSrc = response.status
      this.infoVal.pic = response.status
      this.saveImg()
      this.$store.commit('saveImage', response.status)
    },
    // 叫图片路径存储
    saveImg () {
      window.localStorage.setItem('imageSrc', this.imageSrc)
    }
  },
  mounted () {
    this.infoVal.pic = window.localStorage.getItem('imageSrc')
    this.infoVal.infoId = window.localStorage.getItem('id')
    this.imageSrc = window.localStorage.getItem('imageSrc')
  }
}

</script>
<style lang="less" scoped>
.header-container {
    padding: 0 20px;
    background-color: #333;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
        color: #fff;
        font-size: 14px;
        margin-left: 10px;
    }
    .r-content {
        .user {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }
    .l-content {
        display: flex;
        align-items: center;
        /deep/.el-breadcrumb__item {
            .el-breadcrumb__inner {
                font-weight: normal;
                &.is-link {
                    color: #666
                }
            }
            &:last-child {
                .el-breadcrumb__inner {
                    color: #fff
                }
            }
        }
    }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
